<template>
    <div class="contain" style="flex-direction: column;">
        <HouseDetailTop isCustom :dataList="BasicDetailList" :id="this.$route.query.id" :BasicDetailList="BasicDetailList">
        </HouseDetailTop>
        <div>
            <HouseDeatilNavigation @returnData="setPage" :navList="topNavList"></HouseDeatilNavigation>
        </div>
        <CustomBasicDetail v-if="page == '1'" :BasicDetailList="BasicDetailList" :peopleList="peopleList"
            :isSecondHand="this.$route.query.index"></CustomBasicDetail>
        <CustomerAnalysis v-if="page == '2'"></CustomerAnalysis>
        <CustomTakeLookDetail v-if="page == '3'"></CustomTakeLookDetail>
        <CustomerDynamics v-if="page == '4'"></CustomerDynamics>
        <CustomVisitorRecord v-if="page == '5'"></CustomVisitorRecord>
        <CustomChat v-if="page == '6'"></CustomChat>
    </div>
</template>
        
<script>
import CustomBasicDetail from './CustomBasicDetail'
import CustomerAnalysis from './CustomerAnalysis'
import CustomTakeLookDetail from './CustomTakeLookDetail'
import CustomerDynamics from './CustomerDynamics'
import CustomVisitorRecord from './CustomVisitorRecord'
import CustomChat from './CustomChat'
import { customerFindById, findUserByCustomerId } from '../../http/api'
import HouseDeatilNavigation from '@/components/navigation/HouseDeatilNavigation.vue'
import HouseDetailTop from '@/components/houseList/HouseDetailTop.vue'
export default {
    name: 'CustomDetail',
    components: {
    CustomBasicDetail,
    CustomerAnalysis,
    CustomTakeLookDetail,
    CustomerDynamics,
    CustomVisitorRecord,
    CustomChat,
    HouseDeatilNavigation,
    HouseDetailTop
},
    data() {
        return {
            page: '1',
            topNavList: [this.$t('text.Customer.l5'), this.$t('text.Customer.l6'), this.$t('text.Customer.l7'),
            this.$t('text.Customer.l8'), this.$t('text.Customer.l9'), this.$t('text.Customer.l10')],
            BasicDetailList: {},
            peopleList: [],
        }
    },
    mounted() {

        if (this.$route.query.id != undefined) {
            customerFindById({ id: this.$route.query.id }).then(res => {
                if (res !== undefined && res != null) {
                    this.BasicDetailList = res
                }
            }).catch()

            findUserByCustomerId({ customerId: this.$route.query.id }).then(res => {
                if (res !== undefined && res != null) {
                    this.peopleList = res
                }
            }).catch()
        }

    },
    methods: {
        setPage(index) {
            this.page = index
        }
    },
    watch: {

    },
    computed: {

    }

}
</script>
        
<style scoped>
.contain {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}
</style>